<script setup lang="ts">

</script>

<template>
  <div class="Projectbox">
    <div role="tablist" aria-multiselectable="true" class="collapse">
<div class="active">
  <div role="tab" aria-expanded="true" aria-controls="el-collapse-content-1791" aria-describedby="el-collapse-content-1791">
    <div role="button" id="el-collapse-head-1791" tabindex="0" class="header ">
      <div class="iconBox">
        <img src="@/assets/logos.png">
      </div>
      <div class="title select"> 推荐 </div>
      <div class="title"> 前端开发 </div>
      <div class="title"> 后端开发 </div>
      <div class="title"> 精品免费 </div>
      <i class="arrow"></i>
    </div>
  </div>
  <div role="tabpanel" aria-labelledby="el-collapse-head-1791" id="el-collapse-content-1791" class="wrap">
    <div class="content">
      <div class="courses courses3">
        <!---->
        <div class="course shadow" onclick="location.href='https://chatglm.cn/main/detail';">
          <div class="iconPathBox">
            <img  data-src="http://codelover.club/icons/course/icon13.svg" src="http://codelover.club/icons/course/icon13.svg" lazy="loaded"></div>
            <div title="软件测试技术" class="name">软件测试技术</div>
            <div title="软件测试技术" class="desc"> 简介：软件测试技术 </div>
            <div class="time"> 上课时间：2024-4-23 8:0:0 ~ 2024-7-10 18:0:0 </div>
          </div>
          <div class="course shadow" onclick="location.href='https://chatglm.cn/main/detail';">
            <div class="iconPathBox">
              <img data-src="http://codelover.club/icons/course/icon4.svg" src="http://codelover.club/icons/course/icon4.svg" lazy="loaded"></div>
              <div title="程序设计基础" class="name">程序设计基础</div>
              <div title="程序设计基础" class="desc"> 简介：程序设计基础 </div>
              <div class="time"> 上课时间：2024-4-23 8:0:0 ~ 2024-7-10 18:0:0 </div>
            </div>
            <div class="course shadow" onclick="location.href='https://chatglm.cn/main/detail';">
              <div class="iconPathBox">
                <img data-src="http://codelover.club/icons/course/icon3.svg" src="http://codelover.club/icons/course/icon3.svg" lazy="loaded"></div>
                <div title="数据库高级应用" class="name">数据库高级应用</div>
                <div title="数据库高级应用" class="desc"> 简介：数据库高级应用 </div>
                <div class="time"> 上课时间：2024-4-23 8:0:0 ~ 2024-7-10 18:0:0 </div>
              </div>
              <div class="course shadow" onclick="location.href='https://chatglm.cn/main/detail';">
                <div class="iconPathBox">
                  <img data-src="http://codelover.club/icons/course/icon10.svg" src="http://codelover.club/icons/course/icon10.svg" lazy="loaded"></div>
                  <div title="后端技术与项目开发" class="name">后端技术与项目开发</div>
                  <div title="后端技术与项目开发" class="desc"> 简介：后端技术与项目开发 </div>
                  <div class="time"> 上课时间：2024-4-23 8:0:0 ~ 2024-7-10 18:0:0 </div>
                </div>
                <div class="course shadow " onclick="location.href='https://chatglm.cn/main/detail';">
                  <div class="iconPathBox">
                    <img data-src="" src="https://codelover.club/icons/course/icon5.svg" lazy="error">
                  </div>
                  <div title="24春季进销存系统设计与实现" class="name">24春季进销存系统设计与实现</div>
                  <div title="进销存系统设计与实现" class="desc"> 简介：进销存系统设计与实现 </div>
                  <div class="time"> 上课时间：2024-4-11 8:0:0 ~ 2024-7-31 18:0:0 </div>
                </div>
                <div class="course shadow" onclick="location.href='https://chatglm.cn/main/detail';">
                  <div class="iconPathBox">
                    <img data-src="http://codelover.club/icons/course/icon12.svg" src="http://codelover.club/icons/course/icon12.svg" lazy="loaded">
                  </div>
                    <div title="网页设计技术（公选版3）" class="name">网页设计技术（公选版3）</div>
                    <div title="网页设计技术（公选版3）" class="desc"> 简介：网页设计技术（公选版3） </div>
                    <div class="time"> 上课时间：2024-4-10 8:0:0 ~ 2024-5-11 18:0:0 </div>
                  </div>
                  <div class="course shadow" onclick="location.href='https://chatglm.cn/main/detail';">
                    <div class="iconPathBox">
                      <img data-src="http://codelover.club/icons/course/icon14.svg" src="http://codelover.club/icons/course/icon14.svg" lazy="loaded">
                    </div>
                    <div title="前后端分离项目实战" class="name">前后端分离项目实战</div>
                    <div title="前后端分离项目实战" class="desc"> 简介：前后端分离项目实战 </div>
                    <div class="time"> 上课时间：2024-3-3 8:0:0 ~ 2024-3-31 18:0:0 </div>
                  </div>
                  <div class="course shadow" onclick="location.href='https://chatglm.cn/main/detail';">
                    <div class="iconPathBox">
                      <img data-src="https://codelover.club/icons/course/icon7.svg" src="https://codelover.club/icons/course/icon7.svg" lazy="loaded">
                    </div>
                      <div title="专业技能综合实践（2024春季）" class="name">专业技能综合实践（2024春季）</div>
                      <div title="专业技能综合实践" class="desc"> 简介：专业技能综合实践 </div>
                      <div class="time"> 上课时间：2024-2-21 8:0:0 ~ 2024-7-20 18:0:0 </div>
                    </div>
                    <div class="course shadow" onclick="location.href='https://chatglm.cn/main/detail';">
                      <div class="iconPathBox">
                        <img data-src="https://codelover.club/icons/course/icon1.svg" src="https://codelover.club/icons/course/icon1.svg" lazy="loaded">
                      </div>
                      <div title="前端框架应用项目开发" class="name">前端框架应用项目开发</div>
                      <div title="前端框架应用项目开发" class="desc"> 简介：前端框架应用项目开发 </div>
                      <div class="time"> 上课时间：2024-2-21 8:0:0 ~ 2024-7-19 18:0:0 </div>
                    </div>
                    <div class="course shadow" onclick="location.href='https://chatglm.cn/main/detail';">
                      <div class="iconPathBox">
                        <img data-src="/stutasks/1618232325804_查看数据.svg" src="https://codelover.club/icons/course/icon3.svg" lazy="error">
                      </div>
                      <div title="Web前端开发技术" class="name">Web前端开发技术</div>
                      <div title="Web前端开发技术" class="desc"> 简介：Web前端开发技术 </div>
                      <div class="time"> 上课时间：2024-2-21 8:0:0 ~ 2024-7-20 18:0:0 </div>
                    </div>
                    <div class="course shadow" onclick="location.href='https://chatglm.cn/main/detail';">
                      <div class="iconPathBox">
                        <img data-src="https://codelover.club/icons/course/icon14.svg" src="https://codelover.club/icons/course/icon14.svg" lazy="loaded">
                      </div>
                      <div title="2024届毕业设计与顶岗实习" class="name">2024届毕业设计与顶岗实习</div>
                      <div title="2024届毕业设计与顶岗实习" class="desc"> 简介：2024届毕业设计与顶岗实习 </div>
                      <div class="time"> 上课时间：2024-1-6 8:0:0 ~ 2024-7-29 18:0:0 </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
</template>

<style >
.Projectbox{
  margin-bottom: 43px;
  width: 1220px;
  height: 1000px;
}
div{
  box-sizing: border-box;
  display:block;
  unicode-bidi: isolate;
}

.collapse {
  border-top: 1px solid #EBEEF5;
  border-bottom: 1px solid #EBEEF5;
  border: none;
  background-color: #fff;
  box-shadow: 0 10px 6px 0 rgba(19, 18, 18, .16);
  border-radius: 20px;
  border: 1px solid hsla(0, 0%, 85.1%, .5);
  overflow: hidden;
  
}
.active:last-child {
  margin-bottom: -1px;
  
}
.collapse .active .header {
  height: 80px;
}
.header, .wrap {
  padding: 0 10px;
  border: none;
}

@media only screen and (max-width: 700px) {
  .header {
      display: flex;
  }
}
.select:after {
  position: absolute;
  content: "";
  left: 50%;
  right: 50%;
  bottom: 10px;
  transform: translate(-50%);
  width: 15px;
  height: 4px;
  background: #fea91b;
  border-radius: 5px;
}
.header {
  margin-left: 12px;
  border-bottom-color: transparent;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 48px;
  line-height: 48px;
  background-color: #FFF;
  color: #303133;
  cursor: pointer;
  border-bottom: 1px solid #EBEEF5;
  font-size: 13px;
  font-weight: 500;
  -webkit-transition: border-bottom-color .3s;
  transition: border-bottom-color .3s;
  outline: 0;
}

.title {
  
  margin-left: 50px;
  text-align: center;
  position: relative;
  font-family: Segoe UI;
  font-size: 16px;
  color: #707070;
}
.select {
  font-weight: 800;
}


.arrow {
  display: none;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  margin: 0 8px 0 auto;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  font-weight: 300;
}
.header,.wrap {
  padding: 0 1px;
  border: none;
}
.wrap {
  will-change: height;
  background-color: #FFF;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px solid #EBEEF5;
  margin-top: 30px;
}
.content {
  padding-bottom: 25px;
  font-size: 13px;
  color: #303133;
  line-height:2;
}
.courses {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
}
 @media only screen and (max-width: 603px) {
  .courses {
      justify-content: center !important;
  }
} 
.course {
  cursor: pointer;
  padding: 4px 10px 0;
  margin-bottom: 15px;
  margin-left: 30px;
  margin-right: 30px;
  width: 240px;
  height: 270px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #fff;
}
.shadow {
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .16);
  transition: box-shadow .2s linear;
}
.desc, .name {
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.name {
  margin-top: 8px;
  font-family: Segoe UI;
  font-size: 18px;
  color: #707070;
}
.time {
  font-family: Segoe UI;
  font-size: 14px;
}
.iconPathBox img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 220px;
  height: 135px;
  border-radius: 8px;
}
.iconBox img{
  margin-left: 80px;
  margin-top: 20px;
}
img {
  vertical-align: middle;
  border-style: none;
  width: 70px;
 
}

</style>
